import React from 'react';
import {Button, Divider} from "antd";
import {useSelector, useDispatch} from 'react-redux';
import {upNumIncrement, downNumIncrement} from '../../store/toolkit/features/toolSlice';
const  ToolKitComp = function (props) {
    const dispatch = useDispatch();
    const {upNum,downNum} = useSelector(state=>state.vote);
    return (
        <>
            <div className={'container'}>
                <h2>React是很棒的框架</h2>
                <div>
                    {upNum+downNum}
                </div>
            </div>
            <div>
                <div>
                    赞同票数:{upNum}
                </div>
                <div>
                    反对票数:{downNum}
                </div>
            </div>
            <Divider/>
            <Button onClick={()=>dispatch(upNumIncrement(1))}>
                投赞同票
            </Button>

            <Button onClick={()=>dispatch(downNumIncrement(1))}>
                投反对票
            </Button>
        </>
    )

};

export default ToolKitComp;
